<template>
	<view >
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="tabList"
				:scrollable="false"
				@click="sectionChange"
				:activeStyle="{
					color: '#3496FB',
					fontWeight: 'bold',
				}">
			</u-tabs>
			
			<view class="search">
				<view class="search-item">
					<u-search placeholder="输入项目名称筛选"
						shape="square"
						v-model="searchValue"
						:showAction="false"
						@change="searchChange">
					</u-search>
				</view>
				<view class="add-button" @click="searchValue = ''">
					清空
				</view>
			</view>
		</u-sticky>
		<view style="margin-top: 100rpx;" v-if="list.length < 1">
			<u-empty
				text="暂无数据"
				icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
			</u-empty>
		</view>
		<u-swipe-action>
			<u-swipe-action-item
				v-for="(item,index) in list"
				:key="item.id">
				<view class="swipe-action u-border-top u-border-bottom">
					<view class="PhotographerBoxR" style="margin-left: 30rpx;">
						<view class="text-sm margin-top-xs">名称：{{item.name}}</view>
						<view class="text-sm margin-top-xs">型号：{{item.model}}</view>
						<view class="text-sm margin-top-xs">编码：{{item.code}}</view>
						<view class="text-sm margin-top-xs">备注：{{item.remark===null?'无':item.remark}}</view>
						<view class="text-sm margin-top-xs">管理员：{{item.userName===null?'无':item.userName}}</view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>
		
</template>

<script>
	import { getWzList } from '@/api/wzuse.js'
	export default {
		data() {
			return {
				user:{},
				pageNum:1,
				pageSize:15,
				list:[],
				tabList: [
					{
						name: '仪器设备',
					}, 
					{
						name: '办公设备',
					},
					{
						name: '车辆',
					},
					{
						name: '笔记本',
					},
					{
						name: '台式机',
					},
					{
						name: '手机',
					},
				],
				current: 0,
				type:'仪器设备',
				searchValue:'',
			}
		},
		onReady() {
		},
		onReachBottom(){
			this.pageNum += 1
			this.getList()
		},
		onPullDownRefresh(){
			this.pageNum = 1
			this.list = []
			this.getList()
			uni.stopPullDownRefresh()
		},
		onLoad(option) {
			this.user = uni.getStorageSync("loginInfo").user
			this.getList()
		},
		methods: {
			sectionChange(item) {
				console.log(item)
				this.current = item.index
				this.pageNum = 1
				if(this.current===3){
					this.type = '笔记本电脑'
				}else if(this.current===4){
					this.type = '台式电脑'
				}else{
					this.type = item.name
				}
				this.list = []
				this.getList()
			},
			searchChange(e){
				this.searchValue = e
				this.pageNum = 1
				this.list = []
				this.getList()
			},
			async getList(){
				let params = {
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					type:this.type,
					name:this.searchValue
				}
				console.log('params:',params);
				const { data } = await getWzList(params);
				if(data.code == 200){
					this.list = [...this.list,...data.rows]
				}
			},
		}
	}
</script>

<style scoped>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	.text-sm:first-child,.text-sm:last-child{
		font-weight: 600;
	}
	.text-sm:last-child{
		margin-top: 25rpx;
	}
	.add-button{
		line-height: 104rpx;
		color: #0081ff;
	}
</style>